<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>网页预览海康威视的h.264视频流</title>
    <style media="screen">
        video.rotate180 {
            width: 100%;
            height: 100%;
            transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -webkit-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
        }
    </style>
</head>
<body>
<h2>网页预览海康威视的h.264视频流</h2>
<div class="wfsjs">
    <video id="video1" muted="muted" style="width: 70%;height: 70%;" autoplay="autoplay"></video>
    <div class="ratio"></div>
</div>
<br>
<div>
    <span>ip地址：</span>
    <input type="text" name="ip" id="ip" th:value="192.168.1.64">
</div>
<div>
    <span>用户名：</span>
    <input type="text" name="username" id="username" th:value="admin">
</div>
<div>
    <span>&nbsp;&nbsp;密 码：</span>
    <input type="text" name="password" id="password" th:value="kx123456">
</div>
<div>
    <span>&nbsp;&nbsp;端 口：</span>
    <input type="text" name="port" id="port" th:value="8000">
</div>
<input type="hidden" name="channelId" id="channelId" value="1">
<button id="loginAndPlayView">登录并预览</button>

<script th:src="@{/js/jquery-3.4.1.js}"></script>
<script th:src="@{/js/wfs.js}"></script>
<script th:inline="javascript">
    /**
     * 登录并预览按钮点击：先请求 登录+预览接口，然后返回将返回的lUserID拼接到socket地址后面，创建一个websocket。
     * 然后创建wfs实列 ，执行wfs.attachMedia(),最后将socket和vide标签绑定给创建的wfs即可
     */
    $("#loginAndPlayView").click(function () {
        var loginVo = {
            "username": $("#username").val(),
            "password": $("#password").val(),
            "ip": $("#ip").val(),
            "port": $("#port").val(),
            "channelId": $("#channelId").val()
        };
        $.post("http://127.0.0.1:8381/hkCamera/loginAndPlayView", JSON.stringify(loginVo), function (res) {
            console.log(res);
            if (res.code && res.data && res.data.loginStatus === "1") {
                var userId = res.data.userId;
                var playId = res.data.playId;
                if (Wfs.isSupported()) {
                    var video1 = document.getElementById("video1");
                    var wfs = new Wfs();
                    wfs.attachMedia(video1, userId + "_" + playId, "H264Raw", userId);    //绑定video标签
                    //调试视频标签播放速度
                    video1.playbackRate = 1.25;
                }
            } else {
                alert("播放失败，错误信息：" + ((res.data && res.data.loginMessage) ? res.data.loginMessage : ""))
            }
        });
    })
    $.ajaxSetup({
        contentType: "application/json; charset=utf-8"
    });
</script>
</body>
</html>